<template>
  <div class="screen-container">
    <!-- 顶部title -->
    <header class="screen-header">
      <div>
        <img :src="headerSrc" style="height: 60px " alt="">
      </div>

      <span class="logo dataTime showTime">
       {{ nowTime }}
      </span>
      <span class="title">
        <a href="#" style="text-decoration: none; color: #D3DCE6;line-height: 10px;font-family: 华文行楷,serif;"
        >文水县肉牛数据智能监控平台</a>
      </span>
      <div class="title-right">
        <el-button type="primary" round  @click="handleChangeTheme">视频演示</el-button>
        <el-button type="primary"  round  @click="changClick">后台管理</el-button>
        <el-button type="primary"  round  @click="changClick1">客服中心</el-button>
      </div>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <dv-border-box-11 id="left-top" title="地图中心">
          <div style="height: 85%; position: relative; width: 92%; margin:0 auto; text-align:center; top: 12%;">
            <Map ref="map"></Map>
          </div>
        </dv-border-box-11>
        <dv-border-box-11 id="left-bottom"   title="交易中心">
          <div style="height: 85%; position: relative; width: 92%; margin:0 auto; top: 12%;">
            <Scrolljiaoyi></Scrolljiaoyi>
          </div>
        </dv-border-box-11>

      </section>

      <section class="screen-middle">
        <div id="middle-top">
          <dv-border-box-11 id="middle-top-right" style="float:left" title="存栏量">
            <div style="height: 79%; position: relative; width: 92%; margin:0 auto; top: 12%;">
            <Rank ref="rank"></Rank>
            </div>
          </dv-border-box-11>
          <dv-border-box-11 id="middle-top-left" style="float:left" title="养殖情况">
            <div style="height: 83%; position: relative; width: 92%; margin:0 auto; top: 12%;">

            <Scroll ref="scroll"></Scroll>
            </div>
          </dv-border-box-11>


        </div>
        <div id="middle-bottom">
          <dv-border-box-11  id="middle-bottom-bottom" :title=t>
            <div style="height: 85%; position: relative; width: 94%; margin:0 auto; text-align:center; top:12%;">
              <ViewPage1></ViewPage1>
            </div>

          </dv-border-box-11>
        </div>
      </section>
      <section class="screen-right">
        <dv-border-box-11 id="right-top" title="免疫情况">
          <div style="height: 85%; position: relative; width: 92%; margin:0 auto; text-align:center; top: 12%;">
            <!-- <Ranks ref="ranks"></Ranks> -->
            <MyRank ref="rank"></MyRank>
          </div>
        </dv-border-box-11>
        <dv-border-box-11 id="right-bottom" title="无害化处理">
          <div style="height: 83%; position: relative; width: 96%; margin:0 auto; text-align:center; top: 12%;">
            <Ranksss ref="ranksss"></Ranksss>

          </div>

        </dv-border-box-11>
      </section>
    </div>
  </div>
</template>

<script>
import Hot from '@/components/index/Hot.vue'
import Map from '@/components/index/Map.vue'
import Rank from '@/components/index/Rank.vue'
import MyRank from '@/components/index/myrank.vue'
import Seller from '@/components/index/Seller.vue'
import Stock from '@/components/index/Stock.vue'
import Trend from '@/components/index/Trend.vue'
import Scroll from '@/components/index/scroll.vue'
import Scrolljiaoyi from '@/components/index/scrolljiaoyi.vue'
import { getThemeValue } from '@/utils/theme_utils'
import Ranks from '@/components/index/Ranks.vue'
import { mapState } from 'vuex'
import Rankss from '@/components/index/Rankss'
import ViewPage1 from '@/views/ViewPage1'
import Ranksss from '@/components/index/Ranksss.vue'
import { getInfo } from '@/api/login'
import request from "@/utils/request";
export default {
  data() {
    return {
      t: '视频--监控',
      // 定义每一个图表的全屏
      fullScreenStatus: {
        trend: false,
        seller: false,
        map: false,
        rank: false,
        hot: false,
        stock: false
      },
      nowTime: null
    }
  },
  methods: {
    handleChangeTheme() {
      this.$router.push('/ViewPage')
    },
    changClick() {
      this.$router.push('/cowEssen/cowEssen/index')
    },
    changClick1() {
      this.$router.push('/customer')
    },
    changeSize(chartName) {
      // 1.改变fullScreenStatus的数据
      this.fullScreenStatus[chartName] = !this.fullScreenStatus[chartName]
      // 2.需要调用每一个图表组件的screenAdapter的方法
      this.$refs[chartName].screenAdapter()
      this.$nextTick(() => {
        this.$refs[chartName].screenAdapter()
      })
    },
    getTime() {
      var that = this
      console.log('运行了')
      var t = null
      // 1秒等于1000毫秒
      t = setTimeout(time, 1000)

      function time() {
        clearTimeout(t)
        var dt = new Date() //获取未解析的时间
        var yyyy = dt.getFullYear() //获取年
        var MM = dt.getMonth() + 1 //获取月
        var dd = dt.getDate() //获取日
        var HH = dt.getHours() //获取时
        var mm = dt.getMinutes() //获取分
        var ss = dt.getSeconds() //获取秒
        that.nowTime = yyyy + '年' + MM + '月' + dd + '日' + ' ' + HH + '时' + mm + '分' + ss + '秒'
        t = setTimeout(time, 1000)
      }
    }
  },
  components: {
    Hot,
    Map,
    Rank,
    Seller,
    Stock,
    Trend,
    Scroll,
    Scrolljiaoyi,
    Ranks,
    Rankss,
    ViewPage1,
    Ranksss,
    MyRank

  },
  computed: {
    headerSrc() {
      return getThemeValue(this.theme).headerBorderSrc
    },
    themeSrc() {
      return '/static/img/' + getThemeValue(this.theme).themeSrc
    },
    containerStyle() {
      return {
        backgroundColor: getThemeValue(this.theme).backgroundColor,
        color: getThemeValue(this.theme).titleColor
      }
    },
    ...mapState(['theme'])
  },
  watch: {},
  mounted() {
    this.getTime()
    console.log('没切换一次')
    this.fontSize = '26px'
    this.queryCountCow();
  }
}
</script>
<style lang="less" scoped>
// 全屏样式的定义
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
}

.screen-container {
  width: 100%;
  height: 100%;
  //padding: 0 20px;
  background-color: #0b121a;
  //background-color: #5446e0;
  color: #fff;
  box-sizing: border-box;
}

.screen-header {
  width: 100%;
  height: 100px;
  font-size: 20px;
  position: relative;

  > div {
    img {
      width: 100%;
    }
  }

  //按钮颜色
  .el-button--primary {
    background: #2c2b31;
    margin-top: 15px;
  }
  .el-button--medium.is-round{
    background-size: 200px;

  }


  .title {
    position: absolute;
    left: 50%;
    top: 30%;
    font-size: 36px;
    transform: translate(-50%, -50%);
  }

  .title-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 30%;
    transform: translateY(-80%);
  }

  .qiehuan {
    width: 87px;
    height: 37px;
    margin-top: 15px !important;
    cursor: pointer;
  }

  .datetime {
    font-size: 15px;
    margin-left: 10px;
  }

  .logo {
    position: absolute;
    left: 0px;
    top: 30%;
    transform: translateY(-80%);

    img {
      height: 35px;
      width: 128px;
    }
  }
}

.screen-body {
  width: 100%;
  height: 90%;
  display: flex;


  .screen-left {
    height: 100%;
    width: 30%;
    //margin-top: 1%;

    #left-top {
      height: 50%;
      margin-top: -40px;
      position: relative;
    }
    #left-bottom {
      height: 50%;
      margin-top: 20px;
      position: relative;
    }
  }

  .screen-middle {
    height: 100%;
    width: 40%;
    margin-left: 5px;
    margin-right: 5px;

    #middle-top {
      width: 100%;
      height: 50%;
      position: relative;

      #middle-top-left {
        width: 48%;
        height: 100%;
        position: relative;
        margin-top: -40px;
        margin-right: 20px;
      }

      #middle-top-right {
        width: 48%;
        height: 100%;
        position: relative;
        margin-top: -40px;
        margin-right :10px
      }

    }

    #middle-bottom {
      width: 100%;
      height: 50%;
      position: relative;
      margin-top: -20px;

      #middle-bottom-bottom {
        width: 100%;
        height: 103%;
        position: relative;
      }
    }


  }


  .screen-right {
   /* margin-top: 1%;*/
    height: 100%;
    width: 30%;
    #right-top {
      height: 50%;
      position: relative;
      margin-top: -40px;

    }

    #right-bottom {
      height: 50%;
      margin-top: 20px;
      position: relative;
    }
  }
}

.resize {
  position: absolute;
  right: 20px;
  top: 10px;
  cursor: pointer;
}

.resize-scroll {
  position: absolute;
  right: 20px;
  top: -10px;
  cursor: pointer;
}

</style>
